<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'default',
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '首页',
  },
}
</route>

<script lang="ts" setup>
const base = ref(false)
const data = reactive({
  sku: [],
  goods: {},
})

onLoad(() => {
  const { Sku, Goods, imagePathMap } = { Sku: [{ id: 1, name: '颜色', list: [{ name: '亮黑色', id: 100016015112, active: true, disable: false }, { name: '釉白色', id: 100016015142, active: false, disable: false }, { name: '秘银色', id: 100016015078, active: false, disable: false }, { name: '夏日胡杨', id: 100009064831, active: false, disable: false }, { name: '秋日胡杨', id: 100009064830, active: false, disable: false }] }, { id: 2, name: '版本', list: [{ name: '8GB+128GB', id: 100016015102, active: true, disable: false }, { name: '8GB+256GB', id: 100016015122, active: false, disable: false }] }, { id: 3, name: '版本', list: [{ name: '4G（有充版）', id: 100016015103, active: true, disable: false }, { name: '5G（有充版）', id: 100016015123, active: false, disable: false }, { name: '5G（无充版）', id: 100016015104, active: true, disable: true }, { name: '5G（无充）质保换新版', id: 100016015125, active: false, disable: false }] }], Goods: { skuId: '100016015112', price: '4599.00', imagePath: '//m.360buyimg.com/mobilecms/s750x750_jfs/t1/210630/17/8651/208682/618a5bd6Eddc8ea0e/b5e55e1a03bc0126.jpg!q80.dpg.webp' }, imagePathMap: { 100016015112: '//m.360buyimg.com/mobilecms/s750x750_jfs/t1/210630/17/8651/208682/618a5bd6Eddc8ea0e/b5e55e1a03bc0126.jpg!q80.dpg.web', 100016015142: '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg', 100016015078: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg', 100009064831: '//img14.360buyimg.com/n4/jfs/t1/203247/8/14659/237368/618a5c87Ecc968774/b0bb25331e5e2d1a.jpg', 100009064830: '//img14.360buyimg.com/n4/jfs/t1/160950/40/25098/234168/618a5cb9E65ba975e/7f8f93ea7767a51b.jpg' } }
  data.sku = Sku
  data.goods = Goods
  console.log('onLoad', data)
})
// 切换规格类目
function selectSku(ss: string) {
  const { sku, skuIndex, parentSku, parentIndex } = ss
  if (sku.disable)
    return false
  data.sku[parentIndex].list.forEach((s) => {
    s.active = s.id == sku.id
  })
  data.goods = {
    skuId: sku.id,
    price: '4599.00',
    imagePath: '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg',
  }
}
// 底部操作按钮触发
function clickBtnOperate(op: string) {
  console.log('点击了操作按钮', op)
}
// 关闭商品规格弹框
function close() {}
</script>

<template>
  <nut-cell title="基础用法" desc="" @click="base = true" />
  <nut-sku
    v-model:visible="base"
    :sku="sku"
    :goods="goods"
    @select-sku="selectSku"
    @click-btn-operate="clickBtnOperate"
    @close="close"
  />
</template>
